<template>
  <div :style="{
          overflow:'hidden',
          width: val.w + 'px',
          height: val.h + 'px'
       }" @click="changeStatus">

    <svg-icon v-if="val.styleType==='switch'" :icon-class="iconClass" :style="iconStyle"/>
    <template v-if="val.styleType==='img'">
      <el-image v-show="this.active"
                :style="imgStyle"
                :src="activeImgUrl"
                :fit="val.fit">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <el-image v-show="!this.active"
                :style="imgStyle"
                :src="inactiveImgUrl"
                :fit="val.fit">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </template>

  </div>
</template>
<script>
  import StylePane from './style.vue';
  import dataMixin from '../mixins/data';

  const NAME = 'vpd-switch';
  const setting = {
    type: NAME,
    dataType: 'boolean', //期望的数据格式
    styleType: 'switch',
    x: 0,
    y: 0,
    w: 40,
    h: 20,
    minWidth: 40,
    minHeight: 20,
    activeColor: '#13ce66',
    inactiveColor: '#ff4949',
    activeImg: null,
    inactiveImg: null,
  };
  export default {
    mixins: [dataMixin],
    name: NAME,
    icon: 'vpd-switch-on',
    title: '开关',
    panel: StylePane,
    setting: setting,
    props: {
      val: {
        type: Object
      }
    },
    data() {
      return {
        active: false,
        setting: JSON.parse(JSON.stringify(setting)),
      }
    },
    computed: {
      activeImgUrl() {
        return process.env.VUE_APP_BASE_API + this.val.activeImg;
      },
      inactiveImgUrl() {
        return process.env.VUE_APP_BASE_API + this.val.inactiveImg;
      },
      imgStyle() {
        return {
          width: this.val.w + 'px',
          height: this.val.h + 'px',
        };
      },
      iconClass() {
        return this.active ? 'vpd-switch-on' : 'vpd-switch-off';
      },
      iconStyle() {
        const fontSize = this.val.w;
        return {
          color: this.active ? this.val.activeColor : this.val.inactiveColor,
          fontSize: fontSize + 'px',
          marginTop: (this.val.h - fontSize) / 2 + 'px'
        }
      },

    },
    methods: {
      changeStatus() {
        if (this.enableQueryData) {

          this.active = !this.active;
        }
      },
      updateData(data) {
        this.active = Boolean(data);
      },
    }
  }
</script>
<style lang="scss">

</style>
<style scoped>

</style>
